<template>
  <div class="page">
    <header>
      <Sticky>
        <NavBar :title="pageTitle" />
      </Sticky>
      <slot name="header"></slot>
    </header>
    <main>
      <div v-if="ShowNavMargin != undefined" class="nav-margin"></div>
      <slot></slot>
    </main>
    <footer><slot name="footer"></slot></footer>
  </div>
</template>

<script>
import Sticky from '@/widgets/Sticky'
import NavBar from '@/widgets/NavBar'

export default {
  name: 'PageNavLayoutCpt',
  components: {
    Sticky,
    NavBar
  },
  props: ['ShowNavMargin'],
  data() {
    return {
      pageTitle: this.$route.name
    }
  },
  mounted() {}
}
</script>

<style lang="less" scoped>
@import '@/style/size';
.page {
  height: 100%;
  display: flex;
  flex-direction: column;
  main {
    flex: 1;
    overflow: auto;
  }
  .nav-margin {
    height: @size-normal;
  }
}
</style>
